<template>
  <div class="number">
    <ul>
      <li>
        <div class="btn-left" @click="subtract()" :class="{ 'active1':style1 }">-</div>
      </li>
      <li><span class="zk-input">{{count}}</span></li>
      <li>
        <div class="btn-right" @click="add()" :class="{ 'active2':style2 }">+</div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'carnum',
    props: {
      initNum: {
        type: Number,
        default: 1
      }
    },
    data () {
      return {
        count: this.initNum,
        style1: false,
        style2: false,
        showcone: false
      }
    },
    methods: {
      add: function (count) {
        if (this.count >= 10) {
          this.style2 = true
          this.showcone = true
          this.count = 1
        } else {
          this.count++
          this.style1 = false
        }
        this.notifyCount()
      },
      subtract: function (count) {
        if (this.count <= 1) {
          this.style1 = true
          this.showcone = true
          this.count = 1
        } else {
          this.count = this.count - 1
          this.style2 = false
        }
        this.notifyCount()
      },
      notifyCount: function () {
        this.$emit('clicknum', {
          count: this.count
        })
      }
    },
    onShow: function () {
      this.count = 1
      this.initNum = 1
    }
  }
</script>

<style scoped>
  .active1 {
    color: rgb(173, 173, 173) !important;
  }

  .active2 {
    color: rgb(173, 173, 173) !important;
  }

  .number {
    /*float: right;*/
    display: inline-block;
    margin: 13px auto;
  }

  ul, li {
    list-style: none;
  }

  li {
    float: left;
  }

  .zk-input {
    text-align: center;
    height: 34px;
    width: 60px;
    border: 1px solid rgb(80, 173, 241);
    display: block;
    line-height: 36px;
    color: black
  }

  li > div {
    width: 120px;
    height: 36px;
    border: 1px solid rgb(80, 173, 241);
    line-height: 36px;
  }

  li > .btn-left {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-right: none;;
    font-size: 15px;
    width: 50px;
    color: rgb(80, 173, 241);
    text-align: center;
  }

  li > .btn-right {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-left: none;
    color: rgb(80, 173, 241);
    font-size: 15px;
    width: 50px;
    text-align: center;
  }

</style>
